<template>
  <div class="adminis">
    角色管理
    <button @click="addShow(true)">添加</button>
    <TableList
      :loading="loading"
      :tableData="tableData"
      :tableHead="tableHead"
      @stateChange="stateChange"
      @updateNotice="addShow"
      @deleteNotice="deleteNotice"
      @textView="textView"
    />
    <NoticeDialog
      :show="showloding"
      :titleFlag="titleFlag"
      :updateData="updateData"
      @close="addShow"
    />
    <Pageination
      :pageSize="formInline.psize"
      :total="total"
      @changpage="getNoticeList"
    />
  </div>
</template>

<script>
import TableList from "@/components/common/Table";
import NoticeDialog from "@/components/common/NoticeDialog";
import http from "../api/administratorrole.js";
import Pageination from "./../components/common/page1.vue";

export default {
  components: {
    TableList,
    NoticeDialog,
    Pageination,
  },
  data() {
    return {
      loading: false,
      total: 0,
      formInline: {
        key: "",
        address: "",
        tel: "",
        userid: "",
        begindate: "",
        enddate: "",
        state: "",
        type: "",
        page: 1,
        psize: 10,
      },
      tableData: [],
      showloding: false,
      updateData: {},
      titleFlag: false,
      tableHead: [
        {
          label: "ID",
          prop: "id",
        },
        {
          label: "登录账号 ",
          prop: "name",
          type: "isclick",
        },
        {
          label: "状态",
          prop: "state",
          type: "switch",
        },
        {
          label: "操作",
          type: "button",
          button: {
            update: true,
            delete: true,
          },
        },
        // {
        //   label: "添加人",
        //   prop: "edituser",
        //   type: "isclick",
        // },
        // {
        //   label: "头像",
        //   prop: "picture",
        //   type: "img",
        //   imgclick: true,
        //   formatter: (row, prop) => {
        //     // console.log(row, prop, this.$config.baseUrl);
        //     // console.log(row, prop, this.$config.baseUrl);
        //     //模拟测试
        //     let defImg =
        //       "/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F30%2F90%2F40%2F309040a0602c672cebc6ab3a1bbbc8cd.jpg";
        //     let baseUrl = "https://gimg2.baidu.com/image_search";
        //     return !prop ? defImg : this.$config.baseUrl + "/upload/" + prop;
        //     return baseUrl + "upload" + prop;
        //   },
        // },
        // {
        //   label: "图片",
        //   prop: "images",
        //   type: "img",
        //   imgclick: true,
        //   formatter: (row, prop) => {
        //     // console.log(row, prop, this.$config.baseUrl);
        //     let defImg =
        //       "/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F84%2F69%2Fa9%2F8469a992634242df4291b3265f9f2a38.jpg";
        //     prop = [
        //       {
        //         url: defImg,
        //       },
        //       {
        //         url: defImg,
        //       },
        //     ];
        //     let baseUrl = "https://gimg2.baidu.com/image_search"
        //     const images = prop.map(item=>baseUrl+item.url)
        //     return {
        //       url:  images[0],
        //       images
        //     }

        //   },
        // },
      ],
    };
  },
  mounted() {
    this.getNoticeList();
  },
  methods: {
    /**
     * 显示,隐藏，操作 ->[添加/修改/关闭/取消/确定]
     * @param show Boolean 显示 隐藏
     * @param data Object 修改时的数据
     * @param flag Number 控制列表渲染的标识
     */
    async addShow(show, data, flag) {
      console.log(show,data,flag)
      this.showloding = show;
      if (show) {
        this.titleFlag = !!data;
        console.log(this.titleFlag);
        if (this.titleFlag) {
          const rel = this.tableData.find((item) => item.id == flag.id);
          this.updateData = rel;
        }
      } else {
        flag && this.getNoticeList();
        this.updateData = {};
      }
    },
    stateChange(data) {
      console.log("stateChange", data);
    },
    updateNotice(data) {
      console.log("updateNotice", data);
    },
    async deleteNotice(data) {
      const { errCode } = await http.AdministratorDel({ id: data.id });
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getNoticeList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    textView(data) {
      console.log("textView", data);
    },
    async getNoticeList(params) {
      console.log(params);
      const { data } = await http.getAdministratorrole(
        Object.assign(this.formInline, params)
      );
      console.log(data);
      this.tableData = data.list;
      this.total = data.counts;
    },
  },
};
</script>

<style>
.el-tooltip {
  text-align: center !important;
}
.cell {
  text-align: center !important;
}
</style>